﻿<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>选择节点图标</title>
    <style type="text/css">
        #icons a
        {
            float: left;
            display: block;
            margin-left: 5px;
            margin-top: 5px;
            width: 80px;
            height: 80px;
            border: 1px dashed #ccc;
        }
        
        #icons a:hover
        {
            background-color: lightblue;
        }
        
        #icons a img
        {
            margin-left: 10px;
            margin-top: 10px;
        }
        
        .selectedIcon
        {
            background-color: lightblue;
        }
    </style>
    <script type="text/javascript" src="../../Scripts/easyUI/jquery-1.8.0.min.js"></script>
    <script src="../../Scripts/designer.utility.js" type="text/javascript"></script>
    <script type="text/javascript">
        var iconRoot = "../../../DataUser/NodeIcon/",
            icon,
            seleIcon,
            seleImgSrc,
            uh = new UrlHerf(location.href);

        $(function () {

            ajaxService("flow", "GetNodeIconFile", '', function (data) {
                var jdata = $.parseJSON(data);
                if (jdata.success) {
                    $.each(jdata.data, function () {
                        icon = iconRoot + this + '.png';
                        $('#icons').append('<a href="javascript:void(0)" onclick="selectIcon(this)" title="' + this + '"><img src="' + icon + '" width="60" height="60" border="0" /></a>');
                    });

                    if (uh['icon'] != undefined) {
                        icon = decodeURIComponent(uh['icon']);
                        $('a[title="' + icon + '"]').addClass('selectedIcon');
                        seleIcon = icon;
                    }
                }
                else {
                    $.messager.alert('错误', '获取节点图标错误：' + jdata.msg, 'error');
                }
            }, null, function (msg) {
                $.messager.alert('错误', '获取节点图标错误：' + msg, 'error');
            });
        });

        function selectIcon(iconEle) {
            var newIcon = $(iconEle),
                iconImg = newIcon.children(':first-child'),
                sicon = newIcon.attr('title');

            if (seleIcon != undefined && seleIcon != sicon) {
                $('a[title="' + seleIcon + '"]').removeClass('selectedIcon');
            }

            newIcon.addClass('selectedIcon');
            seleIcon = sicon;
            seleImgSrc = iconImg.attr('src');
        }

        //获取选中的图标的url路径
        function getNewIconSrc() {
            if (seleImgSrc) {
                return encodeURIComponent(seleImgSrc);
            }

            return null;
        }
    </script>
</head>
<body>
    <div id="icons">
    </div>
</body>
</html>
